<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">请求数据</button>
<ul class="list">
    <!-- <li>昵称：小错，账号：xiaocuo，邮箱：2239222721@qq.com</li> -->
</ul>

<script>
// 需求：点击 btn 发送ajax请求获取用户数据，展示在页面中

let btn = document.querySelector('.btn')
let list = document.querySelector('.list')

btn.onclick = function (){
    // 1.创建一个数据交互对象(ajax对象、XMLHttpRequest对象)
    let xhr = new XMLHttpRequest()

    // 2.初始化请求（设置请求地址、请求方式等）
    xhr.open('get','http://localhost:8080/users/list?a=123&b=456&_='+Date.now(),true)

    // get有一个特征：浏览器会自动缓存get请求到的数据
    // 发送多次同一个url地址的get请求时，会有缓存问题
    // 解决缓存问题：每次发送的url地址都不一样

    // 3.将请求发送到服务端
    xhr.send(null)

    // 4.等待 请求 状态改变
    xhr.onreadystatechange = function (){
        // 当 xhr.readyState 属性发送变化时，会触发 readystatechange 事件
        if (xhr.readyState === 4) {
            // 下载响应体完成（可以得到服务端响应的数据了）
            console.log( xhr.responseText )// 服务端响应的数据（字符串）
            let json = JSON.parse(xhr.responseText)// json字符串转成json对象

            let tmp = ''
            json.forEach((item)=>{
                tmp += `<li>昵称：${item.nickname}，账号：${item.user}，邮箱：${item.email}</li>`
            })
            list.innerHTML = tmp
        }
    }
}

</script>
</body>
</html>